前言提要

Vue.js官網有提供建議的Style Guide，接下來幾天會陸續介紹這些Style Guide，寫出好品質、好維護的程式碼！

優先度Ａ：必要調整

Component命名為多個單字

• 多個單字組成的component name，而不能是一個單字。
• 這樣的寫法可以避免跟HTML的元素重複定義而衝突，因為HTML元素都是單字組成。
• component的命名規則最好是簡短、明確性、有意義的，單字最好不超過兩三個以上。

E.G.
Vue.component('todo-item', {
  // ...
})

export default {
  name: 'TodoItem',
  // ...
}

Component data

• Component data() 是需要回傳物件回去的function。
• Component在初始化時，為了確保每個component的data的變數不會互相干涉，才需要return該Component內的資料。

E.G.
Vue.component('some-comp', {
  data: function () {
    return {
      foo: 'bar'
    }
  }
})

// In a .vue file
export default {
  data () {
    return {
      foo: 'bar'
    }
  }
}

// It's OK to use an object directly in a root
// Vue instance, since only a single instance
// will ever exist.
new Vue({
  data: {
    foo: 'bar'
  }
})

prop定義

• prop定義盡可能詳細，最好是有定義資料形態。
• 詳細的prop有什麼好處？

  在開發環境下，如果向一個元件提供格式不正確的prop，Vue 將會有警訊，幫助你發現潛在的錯誤。

E.G.
props: {
  status: String
}

// Even better!
props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].indexOf(value) !== -1
    }
  }
}

v-for設定key

• v-for最好要使用key，是為了避免重複產生DOM元素而浪費資源，因此將key視為一個辨識的依據，所有的key必須保持唯一。
• Component常會用key配合v-for，來清楚陣列中的資料。e.g. 物件變數名稱。

E.G.
<ul>
  <li
    v-for="todo in todos"
    :key="todo.id"
  >
    {{ todo.text }}
  </li>
</ul>

v-if與v-for不要放在一起

• 不可以把v-if與v-for放在同一個元素上。
• 有種情況會讓你想要在v-for上用v-if

  為了要略過列表中一個物件，例如：v-for="user in users" v-if="user.isActive"，在這種情況替換一個屬性(比如activeUsers)，回傳已略過的列表。

在Day 8有提過為什麼不這麼做！

E.G.
<ul>
  <li
    v-for="user in activeUsers"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

<ul v-if="shouldShowUsers">
  <li
    v-for="user in users"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

Component style範圍

• 除了在最外層的Componen或是layout Component不用設定style作用範圍，剩下的Component都應該設定style scoped.
• 這項規則跟single-file components有關，不一定要使用scoped attribute，可以使用css modules，是一個基於class的命名規則 (類似BEM的策略)。
• 不管怎樣，都應該要傾向基於class的策略，而不是scoped attribute的策略。
• 這樣寫能夠容易理解class名稱，而且也不會誤解。

<template>
  <button class="button button-close">X</button>
</template>

<!-- Using the `scoped` attribute -->
<style scoped>
.button {
  border: none;
  border-radius: 2px;
}

.button-close {
  background-color: red;
}
</style>
<template>
  <button :class="[$style.button, $style.buttonClose]">X</button>
</template>

<!-- Using CSS modules -->
<style module>
.button {
  border: none;
  border-radius: 2px;
}

.buttonClose {
  background-color: red;
}
</style>
<template>
  <button class="c-Button c-Button--close">X</button>
</template>

<!-- Using the BEM convention -->
<style>
.c-Button {
  border: none;
  border-radius: 2px;
}

.c-Button--close {
  background-color: red;
}
</style>

自訂函式名稱

• 使用板模範圍禁止外部使用自訂函式，如果想要使用自訂函式設定為公用，需要在函式名稱前加$_，並且函式命名不能與其他函式名稱類似。
• 使用Vue的mixins自訂function，提供給任何Component使用。

var myGreatMixin = {
  // ...
  methods: {
    $_myGreatMixin_update: function () {
      // ...
    }
  }
}

// Even better!
var myGreatMixin = {
  // ...
  methods: {
    publicMethod() {
      // ...
      myPrivateFunction()
    }
  }
}

function myPrivateFunction() {
  // ...
}

export default myGreatMixin

明天將會繼續來看看次級的Style Guide有什麼吧！

Resource
Vue.js style-guide